import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, Table, Tabs, Card } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getUserInfo, getAddress, getUserTag, getInvoiceInfo, getProductRecord, getConsumptionRecord } from '@/services/userCenter/userList/info'

const { TabPane } = Tabs

// 表头
const addressColumns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '收货人姓名',
    dataIndex: 'personName',
    key: 'personName',
    align: 'center'
  },
  {
    title: '详细地址',
    dataIndex: 'addressDetail',
    key: 'addressDetail',
    align: 'center'
  },
  {
    title: '手机',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center'
  }
]
const invoiceColumns = [
  {
    title: '发票抬头',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '发票类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center'
  },
  {
    title: '单位税号',
    dataIndex: 'unitNo',
    key: 'unitNo',
    align: 'center'
  },
  {
    title: '单位地址',
    dataIndex: 'address',
    key: 'address',
    align: 'center'
  },
  {
    title: '单位电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center'
  },
  {
    title: '开户银行',
    dataIndex: 'bank',
    key: 'bank',
    align: 'center'
  },
  {
    title: '开户账号',
    dataIndex: 'account',
    key: 'account',
    align: 'center'
  }
]
const productColumns = [
  {
    title: '商品编号',
    dataIndex: 'goodsId',
    key: 'goodsId',
    align: 'center',
  },
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    key: 'goodsName',
    align: 'center'
  },
  {
    title: '所属门店',
    dataIndex: 'storeName',
    key: 'storeName',
    align: 'center'
  },
  {
    title: '浏览次数',
    dataIndex: 'visitQty',
    key: 'visitQty',
    align: 'center'
  }
]
const consumptionColumns = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    align: 'center',
  },
  {
    title: '下单时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center'
  },
  {
    title: '门店名称',
    dataIndex: 'storeName',
    key: 'storeName',
    align: 'center'
  },
  {
    title: '订单金额',
    dataIndex: 'originalPrice',
    key: 'originalPrice',
    align: 'center'
  },
  {
    title: '支付方式',
    dataIndex: 'payTypeName',
    key: 'payTypeName',
    align: 'center'
  },
  {
    title: '实付金额',
    dataIndex: 'actualPrice',
    key: 'actualPrice',
    align: 'center'
  },
  {
    title: '订单状态',
    dataIndex: 'userOrderStatusName',
    key: 'userOrderStatusName',
    align: 'center'
  }
]

const Info = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(9999)
  const [userInfo, setUserInfo] = useState({})
  const [userId, setUserId] = useState('')
  const [addressList, setAddressList] = useState([])
  const [userTag, setUserTag] = useState([])
  const [invoiceInfo, setInvoiceInfo] = useState([])
  const [productRecord, setProductRecord] = useState([])
  const [consumptionRecord, setConsumptionRecord] = useState([])

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    setUserId(props.location.query.id)
    await getUserInfos()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 返回按钮
  const goBack = () => {
    props.history.goBack(-1)
  }
  // 获取用户信息
  const getUserInfos = async () => {
    let userId = props.location.query.id
    let params = {
      user: {
        id: userId
      }
    }
    let res = await getUserInfo(params)
    if (res.code === '0') {
      setUserInfo(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 切换tab
  const changeTab = async (key) => {
    switch (key) {
      case '1':
        await getUserInfos()
        break
      case '2':
        await getAddresss()
        break
      case '3':
        await getUserTags()
        break
      case '4':
        await getInvoiceInfos()
          break
      case '5':
        await getProductRecords()
        break
      case '6':
        await changeTabs('1')
        break
    }
  }
  // 获取收获地址
  const getAddresss = async () => {
    let params = {
      pageNo,
      pageSize,
      id: userId
    }
    let res = await getAddress(params)
    if (res.code === '0') {
      let obj = res.data
      let arr = []
      arr.push(obj)
      setAddressList(arr)
    } else {
      alert(res.msg)
    }
  }
  // 获取会员标签
  const getUserTags = async () => {
    let params = {
      userId
    }
    let res = await getUserTag(params)
    if (res.code === '0') {
      setUserTag(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 获取开票信息
  const getInvoiceInfos = async () => {
    let params = {
      pageNo,
      pageSize,
      storeId: '',
      supplierId: '',
      userId
    }
    let res = await getInvoiceInfo(params)
    if (res.code === '0') {
      setInvoiceInfo(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 获取商品记录
  const getProductRecords = async () => {
    let params = {
      pageNo,
      pageSize,
      storeId: '',
      supplierId: '',
      userId
    }
    let res = await getProductRecord(params)
    if (res.code === '0') {
      setProductRecord(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 获取消费记录
  const getConsumptionRecords = async (params) => {
    let res = await getConsumptionRecord(params)
    if (res.code === '0') {
      setConsumptionRecord(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 切换小tab
  const changeTabs = async (key) => {
    let params = {
      pageNo,
      pageSize,
      storeId: '',
      supplierId: '',
      userId
    }
    switch (key) {
      case '1':
        params.orderSource = 'ONLINE'
        break
      case '2':
        params.orderSource = 'OFFLINE'
        break
    }
    await getConsumptionRecords(params)
  }

  return (
    <PageHeaderWrapper title="用户信息">
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Button type="primary" onClick={goBack}>返回</Button>
      <Tabs defaultActiveKey="1" onChange={changeTab}>
        <TabPane tab="基本信息" key="1">
          <Card style={{ width: '100%' }}>
            <p>姓名：{userInfo.wechatNickname}</p>
            <p>用户名: {userInfo.loginName}</p>
            <p>昵称：{userInfo.nickname}</p>
            <p>邮箱：{userInfo.email}</p>
            <p>注册时间：{userInfo.createTime}</p>
            <p>手机号：{userInfo.phone}</p>
            <p>QQ：</p>
            <p>性别：{userInfo.sex === '1' ? '男' : '女'}</p>
            <p>微信：</p>
            <p>出生日期：</p>
            <p>籍贯：</p>
            <p>OPENID：</p>
          </Card>
        </TabPane>
        <TabPane tab="收货地址" key="2">
          <Table
            columns={addressColumns}
            dataSource={addressList}
          />
        </TabPane>
        <TabPane tab="会员标签" key="3">
          <div>{userTag.classifyAttr}</div>
          <div>{userTag.classifyId}</div>
          <div>{userTag.labelId}</div>
          <div>{userTag.labelName}</div>
          <div>{userTag.markCount}</div>
        </TabPane>
        <TabPane tab="开票信息" key="4">
          <Table
            columns={invoiceColumns}
            dataSource={invoiceInfo}
          />
        </TabPane>
        <TabPane tab="商品浏览" key="5">
          <Table
            columns={productColumns}
            dataSource={productRecord}
          />
        </TabPane>
        <TabPane tab="消费记录" key="6">
          <div>
            <Tabs defaultActiveKey="1" type="card" onChange={changeTabs}>
              <TabPane tab="线上消费" key="1">
              </TabPane>
              <TabPane tab="线下消费" key="2">
              </TabPane>
            </Tabs>
            <Table
              columns={consumptionColumns}
              dataSource={consumptionRecord}
            />
          </div>
        </TabPane>
      </Tabs>
   </PageHeaderWrapper>
  )
}

export default Form.create()(Info)
